<template>
  <div class="statistical-block">
    <div v-if="moreType==2" class="tab-block">
      <div class="tab-item" @click="tabActive=1" :class="tabActive==1?'active':''">未就业人员</div>
      <div class="tab-item" @click="tabActive=2" :class="tabActive==2?'active':''">零就业人员</div>
      <div class="tab-item" @click="tabActive=3" :class="tabActive==3?'active':''">高校毕业生</div>
      <div class="tab-item" @click="tabActive=4" :class="tabActive==4?'active':''">退伍军人</div>
    </div>
    <div @click="personShow=true" class="person-item head">
      <div class="name">姓名</div>
      <div class="gender">性别</div>
      <div class="age">年龄</div>
      <div class="education">学历</div>
      <div class="cause">{{ moreType==1?'未就业原因':'就业困难原因' }}</div>
    </div>
    <div @click="personShow=true" class="person-item body">
      <div class="name">朱瑞华</div>
      <div class="gender">女</div>
      <div class="age">23</div>
      <div class="education">大专</div>
      <div class="cause">被解聘</div>
    </div>
    <div @click="personShow=true" class="person-item body">
      <div class="name">张伟</div>
      <div class="gender">女</div>
      <div class="age">23</div>
      <div class="education">大专</div>
      <div class="cause">开除</div>
    </div>
    <div @click="personShow=true" class="person-item body">
      <div class="name">段文鑫</div>
      <div class="gender">男</div>
      <div class="age">21</div>
      <div class="education">高中</div>
      <div class="cause">合同期满</div>
    </div>
    <div @click="personShow=true" class="person-item body">
      <div class="name">李乐</div>
      <div class="gender">女</div>
      <div class="age">23</div>
      <div class="education">本科</div>
      <div class="cause">其他</div>
    </div>
    <div @click="personShow=true" class="person-item body">
      <div class="name">李玉飞</div>
      <div class="gender">男</div>
      <div class="age">19</div>
      <div class="education">高中</div>
      <div class="cause">开除</div>
    </div>
    <Modal v-if="personShow" @closeModal="personShow=false" :level="3" title="详情" width="1300px" height="730px">
      <PersonDetail></PersonDetail>
    </Modal>
  </div>
</template>

<script>
import PersonDetail from "@/components/More/PersonDetail.vue";
import Modal from "@/components/Modal/Modal.vue";

export default {
  name: "UnemploymentMoreDetail",
  props:['moreType'],
  components: {Modal, PersonDetail},
  data(){
    return{
      personShow:false,
      name:'',
      tabActive:1,
    }
  }
}
</script>

<style scoped lang="scss">
.statistical-block{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tab-block{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 20px;
  .tab-item{
    width:230px;
    cursor: pointer;
    height: 50px;
    border: 2px solid rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07a6ff;
    background: #032d5f;
  }
  .tab-item.active{
    border:2px solid #07a6ff;
  }
}
.person-item{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 45px;
  .name{
    width: 20%;
  }
  .gender{
    width: 20%;
  }
  .age{
    width: 20%;
  }
  .education{
    width: 20%;
  }
  .cause{
    width: 20%;
  }
}
.person-item.head{
  background: #124881;
  div{
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
}

.person-item.body{
  background: #0c294c;
  div{
    color: #fff;
    padding: 0 20px;
  }
}
.person-item.body:nth-child(2n){
  background: #0d2e54;
}
</style>
